<template>
<el-card class="page-tools">
 <el-input v-model="value" placeholder="根据用户名搜索" clearable style="width:200px"  ></el-input>
  <el-button class="btn" @click="qingkong">清空</el-button>
  <el-button type="primary" @click="search" >搜索</el-button>
    <el-button type="success" class="btn1" fixed="right" @click="handleAdd" >新增用户</el-button>
  <el-row type="flex" justify="space-between" align="middle">
  <el-alert title="共3条记录" type="info" show-icon class="alert" ></el-alert>
 </el-row>
 <el-table class="table" :data="tableList" >
  <el-table-column label="序号" type="index" />
  <el-table-column label="邮箱" prop="email" align="center"  />
  <el-table-column label="联系电话" prop="phone" align="center" />
  <el-table-column label="用户名" prop="username" align="center">
  </el-table-column>
  <el-table-column label="权限组名称" prop="permission_group_title" align="center" />
  <el-table-column label="角色" prop="role" align="center"/>
  <el-table-column label="操作" align="center" >
    <template slot-scope="{ row }" >
            <button type="button" class="el-button el-button--primary el-button--medium is-plain is-circle" @click="editFn(row)">
              <i class="el-icon-edit" ></i>
            </button>
            <button type="button" class="el-button el-button--danger el-button--medium is-plain is-circle" @click="handleDel(row)" >
              <i class="el-icon-delete" ></i>
            </button>
    </template>
  </el-table-column>
 </el-table>
  <!-- <Tools :dialog-visible.sync="dialogVisible" /> -->
  <userAdd
  ref="userAdd"
  :ruleInline="rules"
  :pageTitle="pageTitle"
  :PermissionGroupsList="PermissionGroupsList"
  :formBase="formBase"
  :text="text"
  />
  <pageTool
  style="margin-left:900px"
  @pageChange = pageChange
  :total= "counts"
  :paginationPage = "requestData.page"
  :paginationPagesize= "requestData.pagesize"
  ></pageTool>
 </el-card>

</template>
<script>
import { list, remove } from '@/api/base/users'
import { list1 } from '@/api/base/permissions'
// import Tools from '@/module-manage/pages/Tools.vue'
import userAdd from '@/module-manage/components/user-add.vue'
import pageTool from '@/module-manage/components/page-tool.vue'
export default {
  components: {
    userAdd,
    pageTool
  },
  data () {
    return {
      input: '',
      text: '',
      pageTitle: '用户',
      PermissionGroupsList: '',
      formBase: {
        avatar: '',
        password: ''
      },
      requestData: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]

      },
      tableList: [],
      value: '',
      dialogVisible: false,
      counts: ''
    }
  },
  created () {
    this.listTable()
    this.list1()
  },
  methods: {
    async listTable () {
      const res = await list(this.requestData)
      console.log(res)
      this.tableList = res.data.list
      this.counts = res.data.counts
      // console.log(this.requestData)
    },
    async list1 () {
      const res = await list1()
      this.PermissionGroupsList = res.data.list
    },
    // 搜索
    async search () {
      // console.log(this.username)
      this.requestData.username = this.value
      const res = await list(this.requestData)
      // this.uname = res.data.list.username
      // console.log(res)
      this.tableList = res.data.list
      this.value = ''
    },
    // 清空
    qingkong () {
      this.value = ''
    },
    // 新增用户
    handleAdd () {
      console.log('2121')

      this.$refs.userAdd.dialogFormV()
      this.text = '创建'
    },
    editFn (row) {
      console.log(row)
      this.text = '编辑'
      this.$refs.userAdd.dialogFormV()
      this.formBase = row
    },
    // 删除
    async handleDel (row) {
      // console.log(id)
      try {
        await this.$confirm('您确定要删除吗', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(async () => {
          await remove(row)
          this.listTable()
          this.$message.success('删除员工成功')
        })
      } catch (error) {
        console.log(error)
      }
    },
    pageChange (page) {
      console.log(page)
      this.requestData.page = page
      this.listTable()
    }
  }
}

</script>
<style lang='scss'>
.page-tools {
 margin: 10px 20px;
 .dialog{
  margin-left: 10px;
 }
 .btn{
  margin-left: 10px;
 }
 .before {
  line-height: 34px;
  display: inline-block;
  border-radius: 3px;
  i {
   margin-right: 5px;
  }
 }
 .alert{
  margin: 20px 0;
 }
 .table{
  padding: 10px 0;
 }
}
</style>
